<template>
  <div id="app">
    <div>
      <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
        <span>关于我的文章目前为空，请先添加名为“aboutMe”的文章</span>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div>
      <!--      {{ aboutMessage }}-->
      <v-md-editor :value="aboutMessage" mode="preview"></v-md-editor>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "AboutMe",
  data() {
    return {
      aboutMessage: "null",
      dialogVisible: false
    }
  },
  mounted() {
    // TODO 从后端拿取关于我的数据
    this.getDocument()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(res => {
            console.log(res)
            done();
          })
          .catch(res => {
            console.log(res)
          });
    },

    async getDocument() {
      // http://localhost:9000/blog/queryById/20
      const {data: res} = await this.$http.get("/blog/aboutMe")
      if (res.data.Content.length === 0) {
        // alert("没数据")
        this.dialogVisible = true
      } else {
        // 前往写数据
        this.aboutMessage = res.data.Content
      }
    }
  }
})
</script>

<style scoped>

</style>